import React from 'react'
import Logo from '../../component/logo/logo'
import {List, InputItem, WingBlank, WhiteSpace, Button} from 'antd-mobile'
import {connect} from 'react-redux'
import {login} from '../../redux/user.redux'
import {Redirect} from 'react-router-dom'
import imoocFrom from '../../component/imooc-form/imooc-form'

/*
*属性代理
*/
//添加自定义属性
// class Hello extends React.Component {
//     render() {
//         return (
//             <div>
//                 <h1>哈哈</h1>
//                 <h2>hello immoc i have react</h2>
//             </div>
//         )
//     }
// }

// function WrapperHello(Comp) {
//     class WrapComp extends React.Component {
//         render() {
//             return (
//                 <div>
//                     <p>这是高阶元素特有的元素</p>
//                     <Comp {...this.props}> </Comp>
//                 </div>
//             )
//         }
//     }
//     return WrapComp
// }
// Hello = WrapperHello(Hello)

/*
*反向继承
*/
//劫持生命周期
// function WrapperHello(Comp) {
//     class WrapComp extends Comp {
//         componentDidMount(){
//             console.log('这是高阶组件')
//         }
//         render() {
//             return (
//                 <div>
//                     <Comp></Comp>
//                 </div>
//             )
//         }
//     }
//     return WrapComp
// }
//@WrapperHello

@connect(state => state.user, {login})
@imoocFrom
class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            user: '',
            pwd: '',
            eye: 'open'
        }

        this.handleLogin = this
            .handleLogin
            .bind(this)
        this.register = this
            .register
            .bind(this)

    }
    dva(type) {
        this.setState({eye: type})
    }
    register() {
        this
            .props
            .history
            .push('/register')
    }

    handleLogin() {
        
        console.log(this.props.state)
        this
            .props
            .login(this.props.state)
    }
    render() {
        return (

            <div>
                {(this.props.redirectTo && this.props.redirectTo != '/login')
                    ? <Redirect to={this.props.redirectTo}/>
                    : null}
                <Logo eye={this.state.eye}/>
                <h2>这是登录页面</h2>
                <WingBlank>
                    <List>
                        {this.props.msg
                            ? <p className='error-msg'>{this.props.msg}</p>
                            : null}
                        <InputItem
                            onBlur={() => {
                            this.dva('close')
                        }}
                            onFocus={() => {
                            this.dva('open')
                        }}
                            onChange={v => {
                            this
                                .props
                                .handleChange('user', v)
                        }}>用户</InputItem>
                        <WhiteSpace/>
                        <InputItem
                            onBlur={() => {
                            this.dva('open')
                        }}
                            onFocus={() => {
                            this.dva('close')
                        }}
                            onChange={v => {
                            this
                                .props
                                .handleChange('pwd', v)
                        }}
                            type='password'
                            pwd={this.state.pwd}>密码</InputItem>
                    </List>
                    <Button onClick={this.handleLogin} type='primary'>登录</Button>
                    <WhiteSpace/>
                    <Button onClick={this.register} type='primary'>注册</Button>
                </WingBlank>
            </div>
        )
    }
}

export default Login